<template>
  <div class="app-container">
    <el-form ref="form"
             :model="form"
             :label-position="labelPosition"
             class="register-form">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="事务所名称">
                <el-input v-model="form.firmName" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事务所编号">
                <el-input v-model="form.officeNumber" type="text" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码">
                <el-input v-model="form.unifiedSocialCreditCode" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="社会信用代码证">
                <el-image style="width: 100px; height: 100px"
                          v-if="form.accountantCertificateFile != undefined && (form.accountantCertificateFile.indexOf('jpg') !== -1 || form.accountantCertificateFile.indexOf('JPG') !== -1 || form.accountantCertificateFile.indexOf('JPEG') !== -1 || form.accountantCertificateFile.indexOf('jpeg') !== -1  || form.accountantCertificateFile.indexOf('png') !== -1 || form.accountantCertificateFile.indexOf('PNG') !== -1 )"
                          :src="picturePrefix + form.accountantCertificateFile"
                          :preview-src-list="[picturePrefix + form.accountantCertificateFile]" alt=""></el-image>
                <span style="width: 50px; height: 50px"
                      v-if="form.accountantCertificateFile != undefined && ( form.accountantCertificateFile.indexOf('pdf') !== -1 || form.accountantCertificateFile.indexOf('PDF') !== -1  ) "
                      @click="downloadFile(form.accountantCertificateFileId,form.firmName+'社会信用代码证','.pdf')">
                  <a href="#">{{form.firmName}}社会信用代码证</a>
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事务所执业证书">
                <el-image
                  style="width: 100px; height: 100px"
                  v-if="form.practiceCertificateFile != undefined && (form.practiceCertificateFile.indexOf('jpg') !== -1 ||  form.practiceCertificateFile.indexOf('JPG') !== -1 || form.practiceCertificateFile.indexOf('JPEG') !== -1 || form.practiceCertificateFile.indexOf('jpeg') !== -1 || form.practiceCertificateFile.indexOf('png') !== -1 || form.practiceCertificateFile.indexOf('PNG') !== -1 )"
                  :src="picturePrefix + form.practiceCertificateFile"
                  :preview-src-list="[picturePrefix + form.practiceCertificateFile]" alt=""></el-image>

                <span style="width: 50px; height: 50px"
                      v-if="form.practiceCertificateFile != undefined && ( form.practiceCertificateFile.indexOf('pdf') !== -1 ||  form.practiceCertificateFile.indexOf('PDF') !== -1 ) "
                      @click="downloadFile(form.practiceCertificateFileId,form.firmName+'事务所执业证书','.pdf')">
                  <a href="#">{{form.firmName}}事务所执业证书</a>
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上传材料">
                <span style="width: 50px; height: 50px"
                      v-if="form.registerUploadFile != undefined && ( form.registerUploadFile.indexOf('zip') !== -1 ||  form.registerUploadFile.indexOf('ZIP') !== -1 ) "
                      @click="downloadFile(form.registerUploadFileId,form.firmName+'上传材料','.zip')">
                  <a href="#">{{form.firmName}}上传材料</a>
                </span>
              </el-form-item>
            </el-col>
           <!-- <el-col :span="12">
              <el-form-item label="签字注会1证书">
                <el-image v-if="form.registerCertificateOneFile.indexOf('jpg') !== -1 || form.registerCertificateOneFile.indexOf('png') !== -1 " style="width: 100px; height: 100px" :src="picturePrefix + form.registerCertificateOneFile" :preview-src-list="[picturePrefix + form.registerCertificateOneFile]" alt=""></el-image>
                <span v-if="form.registerCertificateOneFile.indexOf('pdf') !== -1 ">{{picturePrefix + form.registerCertificateOneFile}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签字注会2证书">
                <el-image v-if="form.registerCertificateTwoFile.indexOf('jpg') !== -1 || form.registerCertificateTwoFile.indexOf('png') !== -1 " style="width: 100px; height: 100px" :src="picturePrefix + form.registerCertificateTwoFile" :preview-src-list="[picturePrefix + form.registerCertificateTwoFile]" alt=""></el-image>
                <span v-if="form.registerCertificateTwoFile.indexOf('pdf') !== -1 ">{{picturePrefix + form.registerCertificateTwoFile}}</span>
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="结束日期" disabled="">
                <el-input v-model="form.approvedPracticeDate" type="text" readonly />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="事务所执业证书编号">
                <el-input v-model="form.practiceCertificateNo" type="text" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="所属省份">
                <el-input v-model="form.province" type="text" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属区县">
                <el-input v-model="form.district" type="text" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通讯地址">
                <el-input v-model="form.mailingAddress" type="text" readonly/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="联系人">
                    <el-input v-model="form.contacts" type="text" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="联系电话">
                    <el-input v-model="form.contactNumber" type="text" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系人手机号">
                    <el-input v-model="form.phoneNumberOfContactPerson" type="text" readonly />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" v-if="form.auditStatus === 1 ||form.auditStatus === -2 ">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="审批人">
                    <el-input v-model="form.optUser" type="text" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="审批理由">
                    <el-input v-model="form.optReason" type="text" readonly />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button
          v-if="form.auditStatus === 0"
          size="medium"
          type="success"
          @click.native.prevent="handleUpdate"
          v-hasPermi="['office:examine:audit']"
        >
          <span>审核通过</span>
        </el-button>
        <el-button
          v-if="form.auditStatus === 0"
          size="medium"
          type="danger"
          @click.native.prevent="handleExamine('拒绝')"
          v-hasPermi="['office:examine:audit']"
        >
          <span>审核拒绝</span>
        </el-button>
        <el-button
          size="medium"
          type="default"
          @click.native.prevent="handleGoBack"
        >
          <span>关闭</span>
        </el-button>
      </el-form-item>

    </el-form>

    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="dialogVisibleCheck"
      width="418px"
      append-to-body
    >
      <div class="dialogView">
        <el-form :model="checkForm" :rules="checkRules" ref="checkForm">
          <el-row :gutter="20">
            <el-col :span="24" class="form-wrap">
              <el-form-item label="账号结束日期:" class="alertFormItem" prop="effectTime">
                <el-date-picker
                  v-model="checkForm.effectTime"
                  size="small"
                  class="endDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择日期"
                  clearable
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="理由:" prop="optReason"  class="from-group">
                <el-input
                  type="textarea"
                  v-model="checkForm.optReason"
                  placeholder="请输入审核理由"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>

            </el-col>
          </el-row>
          <div class="flexRowBetween">
            <el-button type="primary" style="flex: 1;" @click="handleCheckForm">发送</el-button>
            <el-button style="flex: 1;" @click="publicHandleCancel('dialogVisibleCheck')">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- end -->

  </div>
</template>

<script>
    import { getDetailById, checkOffice } from "@/api/system/office";
    export default {
        name: "ExamineDetail",
        data() {
            const containSpecial = RegExp(
                /[(\)(\~)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\|)(\\)(\/)(\<)(\>)(\)]+/
            );
            const validateInput = (rule, value, callback) => {
                if(value === ''){
                    callback(new Error("审核理由不能为空"))
                }else if(containSpecial.test(value)) {
                    return callback(new Error("不能包含非法字符"));
                } else {
                    callback();
                }
            };
            return {
                dialogVisibleCheck:false,
                picturePrefix: process.env.VUE_APP_NGINX_STATIC_RESOURCE_MAPPING_URL, // 图片前缀
                labelPosition: "top",
                form: {},
                officeId: this.$route.query.officeId,
                // 审核表单
                checkForm: {
                    auditStatus:1, // 审核状态
                    optReason: '', // 审核理由
                    effectTime:''
                },
                checkRules: {
                    auditStatus: [
                        {required: true },
                    ],
                    /*optReason: [
                        {required: true, message: "审核理由不能为空",trigger: "blur",},
                        {min: 1,validator: validateInput, trigger: 'blur'}
                    ]*/
                },
            };
        },
        created() {
            this.getList()
            this.checkForm.effectTime = this.getAfterFormatDate(5)
        },
        methods: {
            // 获取事务所详情
            async getList(){
              const response = await getDetailById(this.officeId)
              if(response.msg && response.msg == "无权限"){
                this.$message({
                  message: "无权限!",
                  type: 'error'
                });
                this.$router.push("/office/list")
              }else {
                this.form = response.data;
                // 当数据为空时，显示 -
                for (let key in this.form) {
                  if (this.form[key] === undefined || this.form[key] === null) {
                    this.form[key] = '-';
                  }
                }
              }
            },
          downloadFile(fileId,fileName,suffix){
            window.location.href=process.env.VUE_APP_BASE_API +"/ftp/fileDownload?fileId="+fileId+"&fileName="+fileName+suffix;
          },
            handleGoBack() {
              this.$store.dispatch("tagsView/delView", this.$route);
              this.colseCurWin();
            },
            selectProvince() {
            },
            handleExamine(param) {
                this.$prompt('理由',`审核${param}`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputErrorMessage: `请输入${param}理由`,
                    inputPattern: /\S/,
                }).then(({ value }) => {
                    let checkForm = {
                        auditStatus: '',
                        optReason: value,
                        officeId: this.officeId
                    }
                    checkForm.auditStatus = param === "通过" ? 1: -2
                    // 请求接口
                    checkOffice(checkForm).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                type: 'success',
                                message: '审核提交成功'
                            });
                        }
                    }).catch(()=>{
                        self.loading = false;
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消审核'
                    });
                });
            },
            publicHandleCancel(str){
                this[str] = false;
            },
            //  打开审核界面
            handleUpdate(row) {
                this.dialogVisibleCheck = true;
                this.checkForm.officeId = row.officeId;
                this.checkForm.effectTime = this.getAfterFormatDate(5)
            },
            handleCheckForm(){
                let self = this
                this.$refs.checkForm.validate(valid => {
                    if (valid) {
                        self.loading = true;
                        self.checkForm.officeId = self.officeId
                        checkOffice(self.checkForm).then(res=>{
                            if(res.code === 200){
                                self.dialogVisibleCheck = false;
                                self.loading = false;
                                this.$message({
                                    type: 'success',
                                    message: '审核提交成功!'
                                });
                                self.getList();
                            }

                        }).catch(()=>{
                            self.loading = false;
                        });
                    }
                });
            },
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-form-item__label{
    position: relative;
    font-size: 15px;
  }
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '';  // 去掉 * 号
  }
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
    content: '*';  // 后置 * 号
    color: #ff4949;
    margin-right: 4px;
    right: -15px;
    top: 2px;
    position: absolute;
  }
  ::v-deep .el-input__inner{
    &::-webkit-input-placeholder {
      font-size: 13px;
    }
  }
  ::v-deep .el-date-editor.el-input{
    width: 100%;
  }
  /*readonly 只读样式*/
  ::v-deep  input[readonly]{ border: 1px solid #EEF0F3;} /*input框只读样式*/
  ::v-deep  textarea[readonly]{ border: 1px solid #EEF0F3;} /*textarea框只读样式*/
  ::v-deep   .el-select{
    input[readonly]{ border: 1px solid #EEF0F3;} /*select的 input框默认就是只读的，要还原只读(带边框)样式*/
  }
  ::v-deep .el-dialog__body{
    padding-top:10px;
  }
  .alertFormItem{
    margin-bottom: 10px;
  }
</style>
